// 存放 vuex[状态管理] 相关核心代码

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import setting from './modules/setting'

// 插件安装
Vue.use(Vuex)

// 创建仓库
const store = new Vuex.Store({
  /* 核心一 */
  state: {
    title: '仓库大标题',
    count: 100,
    list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  },
  /* 核心二 */
  // mutations 可以提供修改数据的方法
  mutations: {
    // 所有的 mutation 函数，第一个参数都是 state
    addCount (state, obj) {
      state.count += obj.count
    },
    subCount (state, n) {
      state.count -= n
    },
    changeTitle (state, newTitle) {
      state.title = newTitle
    },
    changeCount (state, newCount) {
      state.count = newCount
    }
  },
  /* 核心三 */
  // actions 处理异步
  // 不能直接操作 state，还是需要调用同步方法 mutations 修改 state
  actions: {
    // actions 函数的第一个参数是 context ，在未分模块的情况下 context 可以看作 store
    // 所以可以通过 context.commit('mutation 函数名',参数)修改 state
    changeCountAction (context, num) {
      // 这里是模拟异步，一般是用来发送异步请求
      setTimeout(() => {
        context.commit('changeCount', num)
      }, 1000)
    }
  },
  /* 核心四 */
  // getters 用来获取 state 派生出来的状态
  getters: {
    // getters 中的函数，第一个参数就是 state，并且必须有返回值，返回值就是 getters 的值
    filterList (state) {
      return state.list.filter(item => item > 5)
    }
  },
  /* 核心五 */
  // modules 用来管理不同模块
  modules: {
    user,
    setting
  }
})

// 导出给 main.js 使用
export default store
